<template>
	<view>

		<map id='map' :markers="covers" @callouttap="goMarkerDetail"
			:latitude="latitude" :longitude="longitude" style="width: 100%; height: 100vh;" :scale="17">
		</map>

		<view v-if="false" class="shift-btn" @click="showMarker=!showMarker">
			<u-icon :name="showMarker?'eye':'eye-off'"></u-icon>
		</view>

		<view class="shift-btn" style="top: 80rpx;">

			<u-code :seconds="180" keepRunning @end="end" ref="uCode" start-text="..." change-text="xs" end-text="..."
				@change="codeChange"></u-code>
			<text>{{tips}}</text>
		</view>

		<view class="bottom-layout" :style="{'transform':showpop?'translate(0, 0)':'translate(0, 500rpx)'}">

			<view class="bottom_title" @click="showpop=!showpop">
				<text style="font-size: 28rpx;">车辆列表</text>
				<u-icon :name="showpop?'arrow-down':'arrow-up'"></u-icon>
			</view>

			<view class="bottom-content">
				<view class="navi-search">
					<u-search placeholder="请输入车牌号" v-model="keywords" :show-action="false" @change="change"
						@search="search"></u-search>
				</view>

				<view class="tab-list">
					<view class="tab-item" :style="{'background-color':titem.check?'#1573FF':'#E4EFFF',
					'border-radius':titem.check?'6rpx':'0rpx'}" v-for="(titem, tindex) in tabListData" :key="tindex"
						@click="tabClick(tindex)">
						<text class="tab-text" :style="{'color':titem.check?'#fff':'#1573FF'}">{{titem.count}}</text>
						<text class="tab-text" :style="{'color':titem.check?'#fff':'#1573FF'}">{{titem.name}}</text>
						<view v-if="titem.check" class="tab-bar">
						</view>
					</view>
				</view>

				<scroll-view scroll-y style="height: 260rpx;" @scrolltolower="lower">

					<view>
						<view v-if="listdata && listdata.length>0">

							<view @click="goDetail(citem)" v-for="(citem, cindex) in listdata" :key="cindex">


								<view class="car-list">
									<image
										:src="4==citem.gpsDeviceStatus ? '../../static/monitor/car_red.png' : '../../static/monitor/car_gray.png'"
										mode="scaleToFill"></image>

									<text class="car-no"
										:style="{'color':1==citem.gpsDeviceStatus?'#1573FF':
									 3==citem.gpsDeviceStatus?'#999999':
									 4==citem.gpsDeviceStatus?'#E02F54':
									 '#333333'}">{{citem.carPlateNo|filterNull}}</text>

									<text class="car-state" :style="{'color':1==citem.gpsDeviceStatus?'#1573FF':
									 3==citem.gpsDeviceStatus?'#999999':
									 4==citem.gpsDeviceStatus?'#E02F54':
									 '#333333'}">
										{{1==citem.gpsDeviceStatus?'行驶':
									 2==citem.gpsDeviceStatus?'静止':
									 3==citem.gpsDeviceStatus?(citem.deviceStatusShow|filterNull):
									 4==citem.gpsDeviceStatus?'报警':'--'}}
									</text>
								</view>


							</view>
						</view>

						<no-data v-else></no-data>
					</view>

				</scroll-view>


			</view>

		</view>



		<!-- 底部导航 -->
		<HomeTabbar :tab="tabNum"></HomeTabbar>
	</view>
</template>

<script>
	import HomeTabbar from '@/components/tabbar.vue';

	export default {
		components: {
			HomeTabbar,
		},
		data() {
			return {
				tips: '',
				emptyList: [],
				showMarker: true,
				page: 1,
				selPosition: 0,
				showpop: true,
				keywords: '',
				tabListData: [{
						name: '全部',
						count: 0,
						check: true
					},
					{
						name: '行驶',
						count: 0,
						check: false
					},
					{
						name: '静止',
						count: 0,
						check: false
					},
					{
						name: '离线',
						count: 0,
						check: false
					},
				],
				listdata: [],
				timeout: null,
				// 标记点
				covers: [],
				latitude: '',
				longitude: '',
				mapRefresh: false, //地图来的刷新
				mapData:[],
				map:null,
			}
		},
		computed:{
			tabNum(){
				return this.$store.state.params.getCarCommon.vehicleListFlag == 1?2:1
			}
		},
		onReady() {
			// 创建map对象
			this.map = uni.createMapContext('map');
		},
		onLoad() {

			let that = this
			wx.getLocation({
				type: 'wgs84',
				success(res) {
					
					console.log('定位成功', res);
					
					that.latitude = res.latitude
					that.longitude = res.longitude
					
					that.$store.commit('params/setLat', res.latitude)
					that.$store.commit('params/setLon', res.longitude)
				},
				fail(e) {
					console.log('定位失败', e);
				}
			})


			this.getCount()
			this.getListData()
			this.getMapData()


			this.mapRefresh = true
			this.getCode()
		},
		methods: {
			codeChange(text) {
				this.tips = text;
			},

			end() {
				setTimeout(() => {
					this.mapRefresh = true
					this.getCode()
				}, 300)
			},

			getCode() {
				if (this.$refs.uCode.canGetCode) {

					this.getMapData()
				}
			},

			
			tabClick(index) {
				this.page = 1
				this.selPosition = index
				this.tabListData.forEach((item, i) => {
					item.check = i === index
				})

				this.getCount()
				this.getListData()
				this.getMapData()
			},


			lower() {
				console.log('触底了');
				this.getListData()
			},
			
			goMarkerDetail(e){
				this.goDetail(this.mapData[this.covers[e.detail.markerId].id])
			},

			goDetail(item) {
				console.log('条目', item);
				
				uni.navigateTo({
					url:'/pagesC/monitor-detail/monitor-detail'+uni.$u.queryParams(item)
				})
				
			},

			getCount() {
				let that = this

				this.$u.api.bcCarCount().then(res => {
					that.tabListData[0].count = res.allCount
					that.tabListData[1].count = res.travelCount
					that.tabListData[2].count = res.staticCount
					that.tabListData[3].count = res.offLineCount
				})
			},

			getListData() {
				let that = this

				this.$u.api.bcCarlist({
					carNo: this.keywords,
					gpsDeviceStatus: this.selPosition,
					page: this.page
				}).then(res => {

					// res = [{
					// 	gpsDeviceStatus: 4,
					// 	carPlateNo: '陕A50631',
					// }, {
					// 	gpsDeviceStatus: 1,
					// 	carPlateNo: '陕U178272',
					// }, {
					// 	gpsDeviceStatus: 3,
					// 	carPlateNo: '陕A9A01X',
					// }, {
					// 	gpsDeviceStatus: 3,
					// 	carPlateNo: '',
					// }, {

					// }, {

					// }, {

					// }, {

					// }, {

					// }, {

					// }, {

					// }, {

					// }]

					if (that.page == 1) {
						that.listdata = []
					}

					that.page++

					that.listdata = that.listdata.concat(res)

				})
			},

			getMapData() {
				let that = this

				this.$u.api.monitorlist({
					carNo: this.keywords,
					gpsDeviceStatus: this.selPosition,
				}).then(res => {

					// res = [{
					// 		latitude: 34.259028,
					// 		longitude: 108.957340,
					// 		carPlateNo: '陕A9A11X',
					// 		gpsDeviceStatus: 5,
					// 	}, {
					// 		latitude: 34.259918,
					// 		longitude: 108.941390,
					// 		carPlateNo: '陕A9A01X',
					// 		gpsDeviceStatus: 4,
					// 	}, {
					// 		latitude: 34.258628,
					// 		longitude: 108.947540,
					// 		gpsDeviceStatus: 1,
					// 		carPlateNo: '陕A9A013',
					// 	}, {
					// 		latitude: 34.250628,
					// 		longitude: 108.941540,
					// 		gpsDeviceStatus: 2,
					// 		carPlateNo: '陕A9A019',
					// 	}, {
					// 		latitude: 34.278628,
					// 		longitude: 108.907540,
					// 		carPlateNo: '陕A50631',
					// 		gpsDeviceStatus: 3,
					// 	},

					// ]
					
					this.mapData = res
					
					if(!uni.$u.test.isEmpty(res)){
						
						that.covers = res.map((item, index)=>{
							return {
								id:index,
								width: 26,
								height: 15,
								latitude: item.latitude,
								longitude: item.longitude,
								iconPath: 'http://api.map.baidu.com/library/LuShu/1.2/examples/car.png',
								callout:{
									content:item.carPlateNo,
									bgColor:1==item.gpsDeviceStatus?'#1573FF':2==item.gpsDeviceStatus?'#333333':3==item.gpsDeviceStatus?'#999999':4==item.gpsDeviceStatus?'#E12B53':'#333333',
									color:'#ffffff',
									padding: '10rpx 5rpx',
									borderRadius: 3,
									textAlign: 'center',
									display: 'ALWAYS'
								}
							}
						})
						
						that.map.includePoints({
							padding:[20,20,100,20],
							points:that.covers
						})
						
					}


					if (that.mapRefresh) {
						that.$refs.uCode.start();
					}

					that.mapRefresh = false

				}).catch(e => {
					that.mapRefresh = false
				})

			},

			change(value) {
				// 搜索框内容变化时，会触发此事件，value值为输入框的内容
				console.log("change+++++" + value);
				if (this.timeout) {
					clearTimeout(this.timeout);
				}

				this.timeout = setTimeout(() => {
					this.search(value);
				}, 1000);
			},

			search(value) {
				console.log("search+++++" + value);
				this.page = 1
				this.getListData()
				this.getMapData()
			},

		}
	}
</script>

<style lang="scss" scoped>
	.bottom-layout {
		display: flex;
		flex-direction: column;
		position: fixed;
		bottom: 100rpx;
		left: 10rpx;
		right: 10rpx;
		background-color: white;
		border-radius: 20rpx 20rpx 0 0;
		transition: all 300ms ease-in-out;
	}

	.bottom_title {
		padding: 20rpx;
		height: 40rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.bottom-content {
		height: 500rpx;

		.navi-search {
			position: relative;
			height: 72rpx;
			margin: 10rpx 20rpx;

		}

		.tab-list {
			display: flex;
			margin: 20rpx;
			height: 120rpx;
		}

		.tab-item {
			flex: 1;
			background-color: #E4EFFF;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}

		.tab-text {
			font-size: 24rpx;
			color: white;

		}

		.tab-bar {
			width: 36rpx;
			height: 4rpx;
			background-color: white;
			border-radius: 4rpx;
			margin-top: 6rpx;
		}

	}

	.car-list {
		display: flex;
		height: 60rpx;
		margin: 0 20rpx;
		align-items: center;

		image {
			width: 30rpx;
			height: 24rpx;
		}
	}

	.car-no {
		color: #333;
		flex: 1;
		margin-left: 12rpx;
		font-size: 24rpx;
	}

	.car-state {
		color: #333;
		font-size: 24rpx;
	}

	.shift-btn {
		position: fixed;
		top: 20rpx;
		right: 20rpx;
		width: 50rpx;
		height: 40rpx;
		background-color: white;
		border-radius: 6rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		text {
			font-size: 22rpx;
			color: #1573FF;
		}
	}
</style>
